<template>
  <div class="dashboard-wrap">
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :lg="8">
        <a>
          <div class="box1 widget-card" @click="f1(1)">
            <div class="leftPart">
              <icon class="icon" name="eye" :scale="5"></icon>
            </div>
            <div class="rightPart">
              <div class="number" >{{tweenedNewUsers}} </div>
              <div class="font-center">总人数</div>
            </div>
          </div>
        </a>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="8">
        <a>
          <div class="box2 widget-card" @click="f1(2)">
            <div class="leftPart">
              <icon class="icon" name="projects" :scale="5"></icon>
            </div>
            <div class="rightPart">
              <div class="number">{{tweenedPageVisits}}</div>
              <div class="font-center">在寝</div>
            </div>
          </div>
        </a>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="8">
        <a>
          <div class="box3 widget-card" @click="f1(3)">
            <div class="leftPart">
              <icon class="icon" name="user" :scale="5"></icon>
            </div>
            <div class="rightPart">
              <div class="number">{{tweenDownload}}</div>
              <div class="font-center">未在寝</div>
            </div>
          </div>
        </a>
      </el-col>
    </el-row>

    <div style="margin-top: 20px">

        <el-table  :data="students"  height="600"  border  style="width: 100%">
          <el-table-column prop="date"  label="学生详情" width="180">

            <el-table-column prop="name"  label="姓名"  width="180"></el-table-column>

            <el-table-column  prop="sex"  label="性别" width="180"></el-table-column>

            <el-table-column  prop="phone"  label="手机" width="180"></el-table-column>

            <el-table-column prop="classes" label="班级" width="180"></el-table-column>

            <el-table-column prop="wxuser" label="辅导员" width="180"></el-table-column>

            <el-table-column  prop="state"  label="状态"></el-table-column>

            <el-table-column prop="lastout" label="最近一次离寝时间" width="180"></el-table-column>

            <el-table-column label="操作">

              <template slot-scope="scope">
                <el-button  size="mini" v-if=" '在寝' ===  scope.row.state "  @click="handleEdit(scope.$index, scope.row)">更为离寝</el-button>
                <el-button  size="mini" v-if=" '不在寝' ===  scope.row.state  " type="danger" @click="handleEdit(scope.$index, scope.row)">更为在寝</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div>
          <span class="demonstration"></span>
          <!--:current-page 默认第一页-->
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="1"
                  :page-sizes="[10, 20, 30]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  page-count="5"
                  :total="total">
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import axios from 'axios';
import lineChart from '@/components/linechart'
import pieChart from '@/components/piechart'


//访问日志
import {upSelectLog} from '../../api/getUrl';

export default {
  name: 'dashboard',
  components: {
    lineChart,
    pieChart,
  },
  data() {
    return {
        tweenedNewUsers: 1,
        tweenedPageVisits: 1,
        tweenDownload: 1,
        students: new Array(),
        total : 200,
        page : 1,
        rows: 10,
        f : 1,
    }
  },
  mounted() {
    this.f1(1);
    this.editNum();


    this.firstLoginnotify();
    // this.randomNum()
    //调用查询所有方法
    /* this.handleSizeChange(10);
    this.handleCurrentChange(1);*/

  },
  beforeDestroy() {
    clearInterval(this.randomfn)
  },
  methods: {
      editNum(){
        let token = "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4";
        let sumNum = 0;
        let inNum = 0;
        let outNum = 0
        let url = "";
        for (let i = 0; i < 3; i++) {
          var that = this;

          if(i === 0){
            url = "https://www.xuedierhuo.cn/stu/page?rows=1&page=1"
          }else if (i === 1){
            url = "https://www.xuedierhuo.cn/stu/search?state=1&rows=1&page=1"
          }else if(i === 2){
            url = "https://www.xuedierhuo.cn/stu/search?state=0&rows=1&page=1"
          }
          axios({
            method:'get',
            headers:{
              'token' : token,
            },
            url : url,
          }).then((response)=>{
            if(i === 0){
              that.sumNum = response.data.data.total;
              this.tweenedNewUsers = that.sumNum;
            }else if (i === 1){
              that.inNum = response.data.data.total;
              this.tweenedPageVisits = that.inNum;
            }else if(i === 2){
              that.outNum = response.data.data.total;
              this.tweenDownload = that.outNum;
            }
          }).catch(function(error) {
              console.log("有异常");
          })
        }



      },
      firstLoginnotify() {
          const USERNAME = Cookies.get('username') || 'Sakuya';
          if (this.$store.state.app.firstLogin === 'yep') {
              this.$notify.info({
                  title: `Welcome, ${USERNAME}`,
                  message: 'First login system, You can view eden system documentation',
                  duration: 6000,
                  offset: 60
              });
              this.$store.dispatch('setFirstLogin')
          }
      },
      handleEdit(index ,rows){
        let id  = rows.id;
        let state = rows.state === "不在寝" ? 1 : 0;
        let url = "https://www.xuedierhuo.cn/stu/editStater?id="+ id +"&state=" + state;
        let token = "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4";
        axios({
          method:'put',
          headers:{
            'token': token,
          },
          url:url,
        }).then( (response)=>{
          this.f1(this.f)
          this.editNum();
        }).catch(function(error) {

        });
      },

      handleSizeChange(val){
        this.rows = val;
        this.f1(this.f)
      },

      handleCurrentChange(val){
        this.page = val;
        this.f1(this.f)
      },

      f1(flag) {
        var flagvar = flag;
        let token = "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4";

        let url = "https://www.xuedierhuo.cn/stu/page?rows="+ this.rows +"&page=" + this.page;
        if(flag === 2){
            url = "https://www.xuedierhuo.cn/stu/search?state=1&rows="+ this.rows +"&page=" + this.page;
        }else if(flag === 3){
            url = "https://www.xuedierhuo.cn/stu/search?state=0&rows="+ this.rows +"&page=" + this.page;
        }
        axios({
          method: 'get',
          headers: {
            'token': token,
          },
          url: url,
        }).then( (response)=> {
          //重置data数据
          Object.assign(this.$data, this.$options.data())
          this.f = flagvar;
          let flag =  response.data.data.rows;
          console.log(flag);
          this.total = response.data.data.total;
          //this.tweenedNewUsers = response.data.data.total;

          for (let i = 0; i < flag.length; i++) {
            let stu = flag[i];
            var date = new Date(stu.lastout);
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            let D = date.getDate() + ' ';
            let h = date.getHours() + ':';
            let m = date.getMinutes() + ':';
            let s = date.getSeconds();
            date = Y+M+D+h+m+s;
            let data = {
              id : stu.id,
              name : stu.name,
              dormId: stu.dormId,
              classes : stu.classes,
              sex : stu.sex === 0 ? "男" : "女",
              wxuser : stu.wxuser.name,
              phone : stu.phone,
              lastout : date,
              state : stu.state === 0 ? "不在寝" : "在寝",
            };
            this.students.push(data)
          }
          this.editNum();

        }).catch(function (error) {

        });


      },

    },
    created : function () {
      let data = {

          page : 1,
          rows : 20
      };
      upSelectLog(data).then((data)=>function () {
          //接受到的数据
          console.log(data);
      });
    }
}
</script>

<style lang="stylus" scoped>

.flex-center
  display flex
  justify-content center
  align-items center

box-style(bg)
  width 100%
  height 130px
  background white
  display flex
  margin-top 15px
  .leftPart
    background bg
    width 130px
    @extend .flex-center
  .rightPart
    flex 1
    color #99a9c0
    @extend .flex-center
    flex-direction column
    .number
      font-size 30px
      padding-bottom 6px
    .font-center
      text-align center

.dashboard-row
  width 100%
  height 400px
  margin-top 15px
  background white

.dashboard-wrap
  margin-top: -15px
  .box1
    box-style(#41b883)
  .box2
    box-style(#9ab7e0)
  .box3
    box-style(#f7c94d)
  .box4
    box-style(#e45f5f)

  .line-chart
    @extend .dashboard-row
    padding 15px
    box-sizing border-box

  .todo-wrap
    @extend .dashboard-row
    .todo-header
      span
        font-weight bold
        color #6fb998
      .enterTodo
        float right
        width 140px
        position relative
        top -8px
        right -11px
    .todo-list
      div:not(:first-child)
        margin-top 15px
  
  .system-report
    @extend .dashboard-row
    height 520px
    .report-header
      span
        font-weight bold
        color #6fb998
    .report-content
      .el-alert:not(:first-child)
        margin-top 15px
      .progress-wrap
        margin-top 20px
        text-align center
        padding 20px
        .el-progress:not(:first-child)
          margin-left 20px
          
  .pie-wrap
    @extend .dashboard-row
    height 520px
    .pie-header
      span
        font-weight bold
        color #6fb998

</style>

